<template>
  <view
    class="loader"
    :class="tagsClass"
  >
    <image
      :src="fileName"
      mode="aspectFit"
    />
  </view>
</template>

<script>
export default {
  name: 'Loader',
  props: {
    name: {
      type: String,
      default: 'puff'
    },
    path: {
      type: String,
      default: '/static/loadings/'
    },
    type: {
      type: String,
      default: 'svg'
    },
    separator: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    fileName () {
      return `${this.path}${this.name}.${this.type}`
    },
    tagsClass () {
      return this.separator ? 'tags-separator' : ''
    }
  }
}
</script>

<style lang="less">
.loader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  image {
    width: 100%;
    height: 100%;
    path {
      fill: #000;
    }
  }
}
</style>
